<template>
  <Header></Header>

  <!-- 主内容区域 -->
  <main class="container max-w-screen-xl mx-auto p-4 px-6">
    <!-- grid 表格布局，分为 4 列 -->
    <div class="grid grid-cols-4 gap-7">
      <!-- 右边侧边栏，占用一列 -->
      <aside class="col-span-4 md:col-span-1 hidden md:block">
        <div class="sticky -top-60">
          <!-- 分类 -->
          <CategoryListCard></CategoryListCard>
        </div>
      </aside>
      <!-- 左边栏，占用 3 列 -->
      <div class="col-span-4 md:col-span-3 mb-3">
        <!-- 标签文章列表 -->
        <div v-if="tags && tags.length > 0"
          class="w-full p-5 pb-7 mb-3 bg-white border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700">
          <!-- 标签标题 -->
          <h2 class="flex items-center mb-5 font-bold text-gray-900 uppercase dark:text-white">
            <!-- 标签图标 -->
            <svg-icon name="tag" size="25" class="icon w-5 h-5 mr-2" />
            标签
            <span class="ml-2 text-gray-600 font-normal dark:text-gray-300">( {{ tags.length }} )</span>
          </h2>

          <!-- 标签列表 -->
          <div class="flex flex-wrap gap-3">
            <a v-for="(tag, index) in tags" :key="index" @click="goTagArticleListPage(tag.id, tag.name)" :class="[
          route.query.name == tag.name
            ? 'bg-sky-100 hover:bg-sky-200'
            : 'hover:bg-gray-100',
        ]" class="bg-green-50 cursor-pointer inline-flex items-center px-3.5 py-1.5 text-xs font-medium text-center border rounded-[12px] focus:ring-4 focus:outline-none focus:ring-gray-300 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 dark:focus:ring-gray-800 dark:border-gray-700 dark:hover:text-white">
              {{ tag.name }}
              <span
                class="inline-flex items-center justify-center w-4 h-4 ms-2 text-xs font-semibold text-sky-800 bg-sky-200 rounded-full">
                {{ tag.articlesTotal }}
              </span>
            </a>
          </div>
        </div>

        <!-- 标签文章列表 -->
        <div class="p-5 mb-4 border border-gray-200 rounded-lg bg-white dark:bg-gray-800 dark:border-gray-700">
          <ol v-if="articles && articles.length > 0" class="divide-y divider-gray-200 dark:divide-gray-700">
            <li v-for="(article, index) in articles" :key="index">
              <a @click="goArticleDetailPage(article.id)"
                class="cursor-pointer items-center block p-3 sm:flex hover:bg-gray-100 hover:rounded-lg dark:hover:bg-gray-700">
                <img class="w-24 h-12 mb-3 mr-3 rounded-lg sm:mb-0" :src="article.cover" />
                <div class="text-gray-600 dark:text-gray-400">
                  <h2 class="text-base font-normal text-gray-900 dark:text-white">
                    {{ article.title }}
                  </h2>
                  <span class="inline-flex items-center text-xs font-normal text-gray-500 dark:text-gray-400">
                    <svg class="inline w-2.5 h-2.5 mr-2 text-gray-400" aria-hidden="true"
                      xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
                      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M5 1v3m5-3v3m5-3v3M1 7h18M5 11h10M2 3h16a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1Z" />
                    </svg>
                    {{ article.createDate }}
                  </span>
                </div>
              </a>
            </li>
          </ol>
          <!-- 该标签下没有文章提示，指定为 flex 布局，内容垂直水平居中，并纵向排列  -->
          <div v-else class="flex items-center justify-center flex-col">
            <svg-icon name="data-null" height="600" width="600"></svg-icon>
            <p class="mt-2 mb-16 text-gray-400">此标签下还未发布文章哟~</p>
          </div>
        </div>

        <!-- 分页 -->
        <nav aria-label="Page navigation example" class="mt-10 flex justify-center" v-if="pages > 1">
          <ul class="flex items-center -space-x-px h-10 text-base">
            <!-- 上一页 -->
            <li>
              <a @click="getTagArticles(current - 1)"
                class="flex items-center justify-center px-4 h-10 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-l-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-stone-950 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
                :class="[current > 1 ? '' : 'cursor-not-allowed']">
                <span class="sr-only">上一页</span>
                <svg-icon name="f-pre-page" class="w-3 h-3" aria-hidden="true"></svg-icon>
              </a>
            </li>
            <!-- 页码 -->
            <li v-for="(pageNo, index) in pages" :key="index">
              <a @click="getTagArticles(pageNo)"
                class="flex items-center justify-center px-4 h-10 leading-tight border dark:bg-stone-950 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
                :class="[
          pageNo == current
            ? 'text-blue-600  bg-blue-50 border-blue-300 hover:bg-blue-100 hover:text-blue-700'
            : 'text-gray-500 border-gray-300 bg-white hover:bg-gray-100 hover:text-gray-700',
        ]">
                {{ index + 1 }}
              </a>
            </li>
            <!-- 下一页 -->
            <li>
              <a @click="getTagArticles(current + 1)"
                class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 rounded-r-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-stone-950 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
                :class="[current < pages ? '' : 'cursor-not-allowed']">
                <span class="sr-only">下一页</span>
                <svg-icon name="f-next-page" class="w-3 h-3" aria-hidden="true"></svg-icon>
              </a>
            </li>
          </ul>
        </nav>
      </div>
    </div>
  </main>
  <ScrollToTopButton></ScrollToTopButton>
  <Footer></Footer>
</template>

<script setup>
import Header from "@/layouts/frontend/components/Header.vue";
import Footer from "@/layouts/frontend/components/Footer.vue";
import UserInfoCard from "@/layouts/frontend/components/UserInfoCard.vue";
import TagListCard from "@/layouts/frontend/components/TagListCard.vue";
import CategoryListCard from "@/layouts/frontend/components/CategoryListCard.vue";
import { ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getTagArticlePageList, getTagList } from "@/api/frontend/tag";
import ScrollToTopButton from "@/layouts/frontend/components/ScrollToTopButton.vue";
const route = useRoute();
const router = useRouter();

// 跳转文章详情页
const goArticleDetailPage = (articleId) => {
  router.push("/article/" + articleId);
};
// 文章集合
const articles = ref([]);
// 标签名称
const tagName = ref(route.query.name);
// 标签 ID
const tagId = ref(route.query.id);
// 所有标签
const tags = ref([]);
getTagList({}).then((res) => {
  if (res.success) {
    tags.value = res.data;
  }
});

// 监听路由
watch(route, (newRoute, oldRoute) => {
  tagName.value = newRoute.query.name;
  tagId.value = newRoute.query.id;
  getTagArticles(current.value);
});

// 跳转标签文章列表页
const goTagArticleListPage = (id, name) => {
  // 跳转时通过 query 携带参数（标签 ID、标签名称）
  router.push({ path: "/tag/article/list", query: { id, name } });
};

// 当前页码
const current = ref(1);
// 每页显示的文章数
const size = ref(10);
// 总文章数
const total = ref(0);
// 总共多少页
const pages = ref(0);

function getTagArticles(currentNo) {
  // 上下页是否能点击判断，当要跳转上一页且页码小于 1 时，则不允许跳转；当要跳转下一页且页码大于总页数时，则不允许跳转
  if (currentNo < 1 || (pages.value > 0 && currentNo > pages.value)) return;
  // 调用分页接口渲染数据
  getTagArticlePageList({
    current: currentNo,
    size: size.value,
    id: tagId.value,
  }).then((res) => {
    if (res.success) {
      articles.value = res.data;
      current.value = res.current;
      size.value = res.size;
      total.value = res.total;
      pages.value = res.pages;
    }
  });
}
getTagArticles(current.value);
</script>
